<template>
    <div class="data-info" v-loading="loading">
        <div class="condition">
            <el-button type="primary" @click="addRule(null)">添加菜单</el-button>
        </div>
        <el-table :data="data" default-expand-all row-key="id">
            <el-table-column prop="name" label="名称"/>
            <el-table-column prop="path" label="路径"/>
            <el-table-column prop="ext" label="图标"/>
            <el-table-column label="排序">
                <template slot-scope="{row}" v-if="row.type == 1">
                    <cell-number :value="row.sequence" @change="sequence($event,row)"></cell-number>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="right" width="210">
                <template slot-scope="{row}">
                    <template v-if="row.type == 1">
                        <a v-if="row.parent_id == 0" class="blue" @click="addRule(row)">添加菜单</a>
                        <a v-else class="blue" @click="actAuth(null,row)">添加功能</a>
                        <a class="l5 green" @click="editRule(row)">编辑</a>
                    </template>
                    <template v-else>
                        <a class="l5 green" @click="actAuth(row,row.parent_id)">编辑</a>
                    </template>
                    <a class="l5 red" @click="deleteRule(row)">删除</a>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import add from './components/add';
    import edit from './components/edit';
    import auth from './components/auth';
    import cellNumber from "@/components/cellNumber";
    import {ruleSequence, rulePostDel, ruleMenus} from "@/api";

    export default {
        data() {
            return {
                column: [
                    {title: '排序', width: 130, slot: 'sequence'},
                    {title: '名称', tree: true, key: 'name'},
                    {title: '路径', key: 'path'},
                    {title: '图标', slot: 'ext'},
                    {title: '操作', align: 'right', width: 200, slot: 'act'}
                ],
                data: [],
                loading: false,
                btnload: 0,
            }
        },
        components: {cellNumber},
        created() {
            this.search();
        },
        methods: {
            //获取角色列表
            search() {
                this.loading = true;
                ruleMenus({}, 'get', (data) => {
                    this.loading = false;
                    this.data = data.lists;
                }, () => {
                    this.loading = false;
                })
            },
            addRule(row) {
                this.$drawer({
                    title: '添加菜单',
                    component: add,
                    data: row,
                    close: this.search,
                });
            },
            editRule(row) {
                this.$drawer({
                    title: '编辑规则',
                    component: edit,
                    data: row,
                    close: this.search,
                });
            },
            deleteRule(row) {
                this.$confirm('确定删除该规则？', () => {
                    this.loading = true;
                    rulePostDel({id: row.id}, () => {
                        this.search();
                    }, () => {
                        this.loading = false;
                    })
                })
            },
            sequence(num, row) {
                this.loading = true;
                ruleSequence({id: row.id, sort: num}, () => {
                    this.search();
                }, () => {
                    this.loading = false;
                })
            },
            actAuth(row, parent) {
                let title;
                if (row === null) {
                    title = "添加功能";
                } else {
                    title = "编辑功能";
                }
                this.$drawer({
                    title: title,
                    component: auth,
                    data: {row: row, parent: parent},
                    close: this.search,
                });
            },
        }
    }
</script>
